<template>
<div class="body-bg ">
  <div class="wrapper-page">
    <div class="panel-heading">
      <div class="text-content">创建一个普通用户账号</div>
    </div>
    <div class="panel-body">
      <el-form
        :model="RegisterFrom"
        status-icon
        :rules="RegisterRules"
        ref="RegisterFrom"
        class="demo-ruleForm"
      >
        <el-form-item prop="telphone">
          <el-input
            placeholder="手机号/工号"
            type="text"
            v-model="RegisterFrom.telphone"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="username" style=" margin-top: 20px;">
          <el-input
            placeholder="用户名4到16位字母或者数字"
            type="text"
            v-model="RegisterFrom.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password" style=" margin-top: 20px;">
          <el-input
            placeholder="密码"
            type="password"
            v-model="RegisterFrom.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item style=" margin-top: 20px;">
          <el-checkbox v-model="checked">请您同意此协议</el-checkbox>
        </el-form-item>
        <el-form-item style=" padding-left:30%; margin-top:25px;">
          <el-button
            type="success"
            class="botton-submit"
            @click="submitForm('RegisterFrom')"
            style="background: #6e8cd7;"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
      <div
        style=" margin-top:14px; color: #6e8cd7;text-align: center;cursor: pointer;"
        @click="jumplogin"
      >
        已经有账号?
      </div>
    </div>
  </div>
</div>
</template>

<script>
import { Register } from "@/api/register.js";
export default {
  name: "login",
  data() {
    var validateUser = (rule, value, callback) => {
      let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!value) {
        return callback(new Error("请您输入手机号"));
      } else if (!reg.test(value)) {
        return callback(new Error("您输入手机号有误请重新输入"));
      }
      callback();
    };
    var validatePssword = (rule, value, callback) => {
      let reg = /^[A-Za-z0-9\u4e00-\u9fa5]+$/;
      if (!value) {
        return callback(new Error("请您输入密码"));
      } else if (value.length >= 10) {
        return callback(new Error("您输入密码不能超过10位"));
      } else if (!reg.test(value)) {
        return callback(new Error("您输入密码不可以含有非法字符"));
      }

      callback();
    };
    var validateUsername = (rule, value, callback) => {
      var reg = /^[a-zA-Z0-9_-]{4,16}$/;
      if (!value) {
        return callback(new Error("请您输入用户名"));
      } else if (!reg.test(value)) {
        return callback(new Error("你的用户名格式有误"));
      }
      callback();
    };
    return {
      radio: "user",
      RegisterFrom: {},
      RegisterRules: {
        telphone: [{ validator: validateUser, trigger: "blur" }],
        password: [{ validator: validatePssword, trigger: "blur" }],
        username: [{ validator: validateUsername, trigger: "blur" }],
      },
      checked: false,
    };
  },
  methods: {
    jumplogin() {
      this.$router.push({
        name: "Login",
      });
    },
    async submitForm(formName) {
      if (!this.checked) {
        return this.$message({
          message: "请你同同意此协议，否则不能注册",
          type: "error",
        });
      }
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          await this.$http.post("/user/register", this.RegisterFrom);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  async created() {
    let requestData = {};
    // const reponse = await Login(requestData);
  },
};
</script>

<style lang="scss" scoped>
.wrapper-page {
  width: 420px;
  margin: 7.5% auto;
}

.panel-heading {
  width: 420px;
  height: 130px;
  border-radius: 6px 6px 0px 0px;
  background: url("../../assets/login.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
}
.text-content {
  text-align: center;
  font-weight: bold;
  font-size: 25px;

  padding-top: 80px;
  color: rgba(255, 255, 255, 0.925);
  div {
    font-size: 25px;
    font-weight: bold;
  }
}
.panel-body {
  background: white;
  padding: 30px;
  border-radius: 0px 0px 6px 6px;
}
.body-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow-y: auto;
  background: #f5f5f5 !important;
}
.botton-submit {
  border: none;
  width: 140px;
  height: 46px;
}
.demo-ruleForm {
  margin-top: 25px;
}
svg {
  font-size: 25px;
}
</style>
